<!--
  文件名: App.vue
  描述: 这是主页面，包括顶部菜单，一些菜单的变化使用v-if,v-show表示
  作者: 白紫铜
  创建日期: 2024-03-03
-->
<template>
  <div id="app">
    <el-affix>
      <el-menu
          :ellipsis="false"
          mode="horizontal"
          background-color="#F5F7FA"
          style="height: 65px; --el-menu-hover-bg-color:#F5F7FA"
          class="el-menu-shadow"
      >
        <el-tooltip content="返回主页">
        <router-link to="/homepage">
        <el-menu-item index="1" class="img">
        <img style="width: 175px; height: 65px" :src="url" alt="logo"/>
      </el-menu-item>
        </router-link>
        </el-tooltip>
        <el-menu-item index="2" class="el_menu_item" @click="gotoTechnologySharing">技术分享</el-menu-item>
        <el-menu-item index="3" class="el_menu_item" @click="gotoBlogAll">博客</el-menu-item>
        <div style="width: 200px;"></div>
        <div style="display: flex; align-items: center">
          <el-input
              class="el_input"
              v-model="keyword"
              placeholder="搜索文章名/作者名">
            <template #prepend>
              <el-button class="button_search" @click="searchPosts">
                <el-icon><Search /></el-icon>
              </el-button>
            </template>
          </el-input>
        </div>
        <div class="flex-grow"/>
        <!--使用router-link进行路由导航-->
        <div v-if="isLogin===false">
          <el-menu-item @click="gotoLogin" index="5" style="height: 65px;background-color: black;color: #F5F7FA" class="el_menu_item">登录/注册</el-menu-item>
        </div>
        <div v-if="isLogin===true">
          <el-sub-menu index="5"
                       expand-close-icon="none"
                       expand-open-icon="none"
          >
            <template #title>
              <el-avatar :size="50" :src="avatarUrl"/>
            </template>
            <div class="menu2-username">{{ username }}</div>
            <el-menu-item index="4-1" @click="userInfo" class="el_sub_menu_item"><el-icon><User /></el-icon>个人中心</el-menu-item>
            <el-menu-item index="4-2" class="el_sub_menu_item"><el-icon><Message /></el-icon>系统消息</el-menu-item>
            <el-menu-item index="4-3" class="el_sub_menu_item"><el-icon><ChatDotRound /></el-icon>私信消息</el-menu-item>
            <el-menu-item index="4-4" @click="userSetting" class="el_sub_menu_item"><el-icon><Setting /></el-icon>设置</el-menu-item>
            <el-menu-item index="4-5" @click="logout" class="el_sub_menu_item"><el-icon><SwitchButton /></el-icon>退出登录</el-menu-item>
          </el-sub-menu>
        </div>

      </el-menu>
      <el-tooltip content="仅在卡出登录bug时使用">
      <el-button v-if="user_id===1||user_id===2" @click="clearToken">强制重新登陆</el-button>
      </el-tooltip>
    </el-affix>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
import {ChatDotRound, Message, Search, Setting, SwitchButton, User} from "@element-plus/icons-vue";
import axios from "axios";
import defaultAvatar from "@/assets/defaultAvatar.png";
const url=require("@/assets/logo(1).png")
export default {
  name: 'App',
  components: {ChatDotRound, Search, User, SwitchButton, Setting, Message},
  computed: {
    url() {
      return url
    }
  },
  data(){
    return{
      isLogin: false,
      username:"",
      keyword:"",
      management:false,
      avatarUrl:defaultAvatar,
      userinfo:"",
      user_id:"",
    }
  },
  methods:{
    gotoTechnologySharing(){
      this.$router.push({name:"TechnologySharing"})
    },
    gotoBlogAll(){
      this.$router.push({name:"BlogAll"})
    },
    userInfo(){
      this.$router.push({
        name:"SelfUserInfo",
        params:{
          user:encodeURIComponent(this.username)
        }})
    },
    userSetting(){
      this.$router.push({name:"UserSetting",params:{user:encodeURIComponent(this.username)}})
    },
    //获取用户信息
    fetchUserInfo(){
      const token=localStorage.getItem('token')
      const config={
        headers:{
          Authorization:`Bearer ${token}`
        }
      }
      axios.get('http://47.113.225.21:1145/api/all_userinfo',config)
          .then(response=>{
            this.userinfo=response.data;
            this.username=this.userinfo.username;
            this.user_id=this.userinfo.user_id;
            this.avatarUrl=this.userinfo.avatarUrl;
            //当前登录用户的相关信息
            localStorage.setItem("username",this.username)
            localStorage.setItem("user_id",this.user_id)
            localStorage.setItem("avatarUrl",this.avatarUrl)
          })
          .catch(error=>{
            console.log('获取用户信息失败:通常不用管这个报错',error)
          })
    },
    logout(){
      //清空本地保存的令牌
      localStorage.clear()
      this.isLogin=false
      this.$router.push({name:"HomePage"})
      window.location.reload()
    },
    clearToken(){
      //清空本地保存的令牌
      localStorage.removeItem('token')
      this.isLogin=false
      this.$router.push({name:"HomePage"})
      window.location.reload()
    },
    gotoLogin(){
      this.$router.push({name:"LoginView"})
    },
    searchPosts(){
      if(this.keyword!==""){
        const timestamp = new Date().getTime(); // 获取当前时间戳
        this.$router.push({
          name:"SearchPosts",
          params: {keywords:encodeURIComponent(this.keyword)},
          query: { ts: timestamp } // 添加时间戳作为查询参数
        })
      }else {
        this.$message.error("搜索内容不能为空")
      }
    }
  },
  created() {
    const isAuthenticated=localStorage.getItem('token')
    if(isAuthenticated==null){
      this.isLogin=false
    }
    if(isAuthenticated){
      this.isLogin=true
    }
  },
  mounted() {
    document
        .querySelector("body")
        .setAttribute("style","background-color:#FAFAFA")
    this.fetchUserInfo()
  },
}
</script>

<style scoped>
.flex-grow{
  flex-grow: 1;
}
.img:hover{
  background-color: #F5F7FA !important;
}
.el_menu_item:hover{
  background-color: #EBEDF0 !important;
}
:deep(.el-menu .el-menu--horizontal){
  --el-menu-hover-bg-color: #F5F7FA;
}
.el-menu-shadow{
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
.router-link{
  text-decoration: none;
  transition: 0.3s ease;
}
.router-link:hover{
  background-color:#EBEDF0 !important;
}
.menu2-username {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Arial',sans-serif;
  font-size: 16px;
  height: 50px;
}
:deep(.el-menu--horizontal){
  color: black !important;
}
.el-menu-item.is-active.el_menu_item{
  border-bottom: none;
  color: #606266 !important;
  background-color: #EBEDF0 !important;
}
.el-menu-item.is-active.img{
  border-bottom: none;
  color: #606266 !important;
}
:deep(.el-menu-item){
  border-bottom: none;
}
:deep(.el-sub-menu__title){
  border-bottom: none !important;
  color: #303133 !important;
}
:deep(.el-menu-item:hover){
  color: #606266 !important;
}
.el_sub_menu_item:hover{
  background-color: #EBEDF0 !important;
  color: #606266 !important;
}
.el-menu--horizontal .el-menu .el-menu-item.is-active,
.el-menu--horizontal .el-menu .el-sub-menu.is-active>.el-sub-menu__title{
  color: #000000 !important;
  background-color: #EBEDF0 !important;
}
.el_input{
  height: 30px;
  width: 300px;
  border-radius: 0 !important;
  --el-input-border-radius:0 !important;
}
.el-input-group__prepend button.el-button{
  border-radius: 0;
  background-color: black;
  color: white;
  height: 30px;
}
.el-input-group__prepend button.el-button:hover{
  background-color: #606266;
  transition: 0.3s ease;
  color: #EBEDF0;
}
:deep(.el-input__inner:focus){
  border-color: #303133 !important;
}
:deep(.el-input__inner:after){
  border-color: #303133 !important;
}
:deep(.el-input__wrapper.is-focus){
  box-shadow: black;
}
:deep(.el-input){
  --el-input-focus-border: #303133;
  --el-input-focus-border-color: #303133;
}

</style>

